<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧菜单栏 -->
      <MenuBar :isCollapse="isCollapse"></MenuBar>
      <el-container>
        <!-- 面包屑 -->
        <el-header>
          <!-- 面包屑 -->
          <div class="bread-top">
            <BreadCrumbs @add="bread" class="breads-top"></BreadCrumbs>
            <FullScreen class="box2"></FullScreen>
            <Lcons class="box3"></Lcons>
            <Users class="box4"></Users>
          </div>
          <!-- 标签页导航 -->
          <TabPage class="tabpage"></TabPage>
        </el-header>
        <!-- 右侧路由视图图 -->
        <el-main>
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MenuBar from "@/components/MenuBar";
import BreadCrumbs from "@/components/BreadCrumbs";
import TabPage from "@/components/TabPage";
import FullScreen from "@/components/FullScreen";
import Lcons from "@/components/Lcons";
import Users from "@/components/Users";
import { House, Expand, ArrowRight, Location } from "@element-plus/icons-vue";
import router from "@/router";
import mest from "@/router/page";
export default {
  components: {
    MenuBar,
    BreadCrumbs,
    TabPage,
    FullScreen,
    Lcons,
    Users,
    House,
    mest,
    Expand,
    Location,
  },
  setup() {
    return {
      mest,
      ArrowRight,
    };
  },
  data() {
    return {
      isCollapse: true,
    };
  },

  methods: {
    bread(e) {
      console.log(e); //
      this.isCollapse = e; //第一次点击就是false
    },
  },
};
</script>

<style lang="less" scope>
.common-layout {
  height: 100%;
  .el-container {
    background-color: #545c64;
    height: 100%;
    .el-header {
      background-color: #fff;
      height: 90px;
      padding: 0px;
      .bread-top {
        display: flex;
        .breads-top {
          width: 84%;
          float: left;
        }
        .box2 {
          width: 4%;
          float: left;
          margin-top: 2px;
        }
        .box3 {
          width: 4%;
          float: left;
        }
        .box4 {
          width: 4%;
          float: left;
        }
      }
      .tabpage {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }
    }
    .el-main {
      height: 100%;
      background-color: #fff;
      padding: 0px;
    }
  }
}
</style>
